<template>
  <div class="account-bind-box">
    <div class="mailbox">
      <div class="flex">
        <i :class="
            email ? 'el-icon-success c-success' : 'el-icon-warning c-danger'
          " />
        <span class="mailbox-text">邮箱</span>
        <div v-if="email"
             class="division">{{ email }}</div>
        <span v-else
              class="mailbox-text text-color text-width">未绑定</span>
        <span class="purpose">用于接收物流源发送的各类重要通知;可以找回密码,但不能用于登录。</span>
      </div>
      <div class="button">
        <el-button type="text"
                   size="small"
                   @click="visible = true">
          {{ email ? "修改" : "马上绑定" }}
        </el-button>
      </div>
    </div>
    <div class="mailbox">
      <div class="flex">
        <i :class="
            mobile ? 'el-icon-success c-success' : 'el-icon-warning c-danger'
          " />
        <span class="mailbox-text">手机号</span>
        <div v-if="mobile"
             class="division">{{ mobile }}</div>
        <span v-else
              class="mailbox-text text-color text-width">未绑定</span>
        <span class="purpose">作为安全手机，可以找回密码，可用于登录。</span>
      </div>
      <div class="button">
        <el-button type="text"
                   size="small"
                   @click="mobileVisible = true">
          {{ mobile ? "修改" : "马上绑定" }}
        </el-button>
      </div>
    </div>
    <email-bind v-if="visible"
                :title="email ? '修改邮箱' : '绑定邮箱'"
                :visible.sync="visible"
                @EmailBind="getAccount" />
    <mobile-bind v-if="mobileVisible"
                 :title="mobile ? '修改手机号' : '绑定手机号'"
                 :visible.sync="mobileVisible"
                 @bindMobile="getAccount" />
  </div>
</template>

<script>
import { user } from "@/api/index";
import EmailBind from "../components/EmailBind.vue";
import MobileBind from "../components/MobileBind.vue";
export default {
  name: "AccountBind",
  components: { EmailBind, MobileBind },
  data () {
    return {
      visible: false,
      mobileVisible: false,
      email: "",
      mobile: "",
      userInfo: sessionStorage.getItem('userInfo')
    };
  },
  computed: {
    // ...mapState({
    //   userId: (state) => state.login.userId
    // })
    user () {
      return JSON.parse(this.userInfo)
    },
    userId () {
      return this.user?.userId
    }
  },
  created () {
    this.getAccount();
  },
  methods: {
    async getAccount () {
      let { code, data } = await user.getUserInfo(this.userId);
      if (code === 0) {
        this.email = data.email;
        this.mobile = data.mobile;
      }
    }
  }
};
</script>

<style scoped>
.mailbox {
  height: 70px;
  line-height: 70px;
  padding: 0 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
}
.c-danger {
  color: #ff3434 !important;
  padding-right: 10px;
}
.c-success {
  color: #67c23a !important;
  padding-right: 10px;
}
.mailbox-text {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  width: 80px;
}
.text-color {
  color: #ff3434;
}
.text-width {
  width: 200px;
}
.purpose {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--prev-color-text-grey);
}
.flex {
  display: flex;
  align-items: center;
}
.division {
  /* height: 18px;
  border: 1px solid #e0e0e0; */
  /* margin-left: 62px; */
  width: 200px;
  margin-right: 40px;
}
</style>
